<template>
	<Header />
	<div class="ele-admin-main" style="background-color: #f1f1f1;">
		<div class="ele-admin-body">
			<div class="ele-admin-content">
				<div class="ele-admin-content-view">
					<div class="ele-body" style="margin-left: 300px;margin-right: 300px;">
						<a-card style="width: 100%;">
						    <a-row type="flex" style="margin-bottom: 20px;">
						      <a-col flex="auto">
						    	  <a-card-meta>
						    		<template #title>
										<a-typography-title :level="3">{{ attractionData.name }}</a-typography-title>
										<a-tag color="pink">发布时间：{{ attractionData.createTime }}</a-tag>
										<a-tag color="red">发布人：{{ attractionData.createUser }}</a-tag>
						    		</template>
						    	  </a-card-meta>
						      </a-col>
						    </a-row>
							<a-divider />
							<a-typography style="margin-top: 20px;">
								<a-image :src="attractionData.image" />
								<!-- 详细内容 -->
								<div class="neirong" v-html="attractionData.content"></div>
							</a-typography>
						</a-card>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { getAttraction } from '@/api/neirong/attraction';
import Header from '../header.vue';
import { useRoute } from 'vue-router';

const attractionData = ref({});

// 初始化
onMounted (()=>{
  let route = useRoute();
  getAttraction(route.params.id).then((res)=>{
	  attractionData.value = res;
  });
});
</script>

<style scoped>
.header-info-avatar {
  margin-top: -90px;
  left: 30px;
  float: left;
  position: relative;
  border: 1px solid #f3f3f3;
  padding: 3px;
  background-color: #fff;
  border-radius: 4px;
}
.header-info-avatar img {
  width: 150px;
  height: 150px;
  border-radius: 4px;
}
.header-info-btn {
  margin-left: 220px;
  padding-top: 20px;
}
.header-info-btn .name {
  font-size: 22px;
  color: #333;
  float: left;
  margin-right: 5px;
}
.bbs-header-info-btn .btn1{
  margin-left: 20px;
  margin-top: 1px;
  margin-right: 20px;
}
.bbs-header-info-btn .btn2{
  margin-left: 20px;
  margin-top: 1px;
  margin-right: 20px;
  float: right;
}
bbs-follow-info {
  font-size: 12px;
  line-height: 30px;
  margin-left: 20px;
  float: left;
}
.bbs-follow-info span {
  margin-right: 10px;
}
.bbs-follow-info span m {
  color: #f00;
}
.header-info-desc {
  margin-left: 220px;
  float: left;
}
</style>